<template>
  <div class="theme">
    <!-- 上部导航栏 -->
    <van-nav-bar
  title="发表评论"
  left-arrow
  @click-left="onClickLeft"
  @click-right="onClickRight"
/>
<!-- 图片的展示 -->
<div class="picture_display"> 
  <viewer >
  <img :src="product_picture" alt="">
  </viewer>
  </div>
<!-- 商品的名称 -->
<div class="tanke">
 <h3>{{trade_name}}</h3> 
</div>
<!-- 商品打星星 -->
<div class="huojian">
<h3>商品评星</h3>

</div>
<div class="score">
  
  <ul>
  <li><span>质量</span> <van-rate @change="onChange" v-model="value1" /> <span>{{this.state1}}</span></li>
  <li><span>味道</span> <van-rate @change="onChange1" v-model="value2" /> <span>{{this.state2}}</span></li>
  <li><span>颜值</span> <van-rate @change="onChange2" v-model="value3" /> <span>{{this.state3}}</span></li>
</ul>
</div>
<!-- 商品的评论内容 -->
<div class="evaluate">
 <h3>评价内容</h3>
<textarea v-model="comment_content" placeholder="请输入你的评价"></textarea>
</div>
<!-- 商品的上传照片 -->
<div class="photo">
 <van-uploader :after-read="afterRead" v-model="fileList" multiple :max-count="2" >
 <van-button class="iconfont shape"  type="primary">&#xe612;<span>添加图片</span></van-button>
 </van-uploader>
</div>
<!-- 购买评价 -->
<div class="purchase_evaluation">
  <h3>购买评价</h3>
  <van-tabbar :fixed="false" v-model="active" active-color="#fff">
  <van-tabbar-item name="1">超级棒</van-tabbar-item>
  <van-tabbar-item name="2">满意</van-tabbar-item>
  <van-tabbar-item name="3">还行</van-tabbar-item>
</van-tabbar>
</div>
<!-- 底部提交评论 -->
<div class="foot">
  <button  :disabled="disableds" @click="submit">提交评论</button>
</div>
</div>
</template>
<script>
  export default {
    data() {
      return {
        active:"1",
        value1: 0,
        value2: 0,
        value3: 0,
        state1:null,
        state2:null,
        state3:null,
        fileList: [
        // Uploader 根据文件后缀来判断是否为图片文件
        // 如果图片 URL 中不包含类型信息，可以添加 isImage 标记来声明
      ],
      // 评论里面的内容
     comment_content:null,
     //time获取的事件
      time:null,
      //获取到的token值
      // tokens:null,
      // 用户的名字
      uname:null,
      //商品的名称
      trade_name:null,
      //获取照片的地址
      product_picture:null,
      //存放到后台接受的地址
      base:[],
      //禁用按钮
      disableds:true,
      //头像的地址
      head_portrait:null
      }
    },
    // 监听值
    watch: {
      comment_content(newValue, oldValue) {
        if(newValue){
          this.disableds=false
        }else{
          this.disableds=true
        }

      //console.log("新的值",newValue)
      //console.log("旧的值",oldValue)
      }
    },
    created () {
      let time =new Date;
     this.time= this.moment(time).format("YYYY-MM-DD HH:mm:ss")
      let token = localStorage.getItem("token");
      //获取到导航栏的商品名称
       this.trade_name =this.$route.query.name 
       this.product_picture= this.$route.query.img
     //console.log( this.trade_name)
     //console.log( this.product_picture)
    //获取到页面的用户名
    let params = { token };
    this.$get("/v1/login/verify", params).then((res) => {
        this.uname = res.data.data[0].uname
        let unames={uname:res.data.data[0].uname}
    this.$get("/v1/my_comments/head_portrait",unames).then((res) => {
     //console.log(res.data.data[0].user_icon)
      this.head_portrait=res.data.data[0].user_icon
    });
    });
   
    },
   
    methods: {
       afterRead(file) {
      // 此时可以自行将文件上传至服务器
      this.base.unshift(file.content);
    },
    onClickLeft() {
      Toast('返回');
    },
    onClickRight() {
      Toast('按钮');
    },
      onChange(value1) {
        if(value1==1)this.state1="非常差"
        if(value1==2)this.state1="很差"
        if(value1==3)this.state1="中等"
        if(value1==4)this.state1="满意"
        if(value1==5)this.state1="超棒"
      },
       onChange1(value2) {
        if(value2==1)this.state2="非常差"
        if(value2==2)this.state2="很差"
        if(value2==3)this.state2="中等"
        if(value2==4)this.state2="满意"
        if(value2==5)this.state2="超棒"
      },
       onChange2(value3) {
        if(value3==1)this.state3="非常差"
        if(value3==2)this.state3="很差"
        if(value3==3)this.state3="中等"
        if(value3==4)this.state3="满意"
        if(value3==5)this.state3="超棒"
      },
      // 点击提交按钮
      submit(e){
        //  在页面上收集到的数据
        let params = {comment_content:this.comment_content, time:this.time ,uname:this.uname,base:this.base,trade_name:this.trade_name,head_portrait:this.head_portrait};
      this.$post("/v1/my_comments/deposit", params).then((res) => {
      //console.log(res);
      });
      this.$router.push(`/your_comments`);
        // console.log(this.uname )
        // console.log(this.time)
        // console.log(this.comment_content)
        // console.log(this.base)
        //  
      }
    },
  }
</script>

<style lang="scss" scoped>
//全局设置
.theme{
  background-color: #f4f4f4;
}
.score{
  position: relative;
  padding-left:1rem ;
  width: 90%;
  height: 10rem;
  margin: auto;
  background-color: white;
  margin-top: 0.5rem;
}
.score ul {
  width: 100%;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.score ul li{
  width: 100%;
  position: relative;
  padding: 0.5rem 0rem;
}
.score ul li span:nth-of-type(1){
  margin-right:1rem ;
}
.score ul li span:nth-of-type(2){
  position: absolute;
  right: 3rem;
  // margin-left:2rem ;
}
// 图片的展示模块
.picture_display{
  width: 90%;
  height: 18rem;
  margin: auto;
}
.picture_display img{
  display: block;
  width: 100%;
  height: 100%;
}
.tanke{
  width: 90%;
  margin: auto;
  text-align: center;
  margin-bottom:1rem ;
}
.huojian{
  width: 90%;
  margin: auto;
}
//输入框的制作
.evaluate{
  width: 90%;
  margin: auto;
}
textarea{
  padding: 1rem 0rem;
  width: 100%;
  margin-top: 0.5rem;
  height: 10rem;
  background-color: white;
  outline: none;
  border: transparent;
  font-size: 1rem;
  padding-left:1rem;
  resize: none;
}
.photo{
  width: 90%;
  margin: auto;
}
.iconfont{
  font-size: 5rem;
}
.shape{
  width: 5rem;
  height: 5rem;
  border: transparent;
  font-size:1rem;
  color: black;
  background-color: 	#F4A460;
}
// 购买评价
.purchase_evaluation{
  background: white;
  margin-top:1rem ;
  width: 90%;
  margin: auto;
  margin-bottom:6rem ;
}
.purchase_evaluation h3{
  margin-top: 1rem;
}
.van-tabbar{
  margin-top: 1rem;
}
.van-tabbar-item{
  border-radius: .625rem;
  margin:0rem 0.5rem;
 
}
.van-tabbar-item--active{
  background-color: #F4A460;
}
// 底部提交评论
.foot{
  z-index: 1000;
  position: fixed;
  bottom: 0rem;
  width: 100%;
  height: 4rem;
  background-color: 	#F4A460;
}
.foot button{
  width: 90%;
  position: absolute;
  left: 50%;
  top: 50%;
  height: 80%;
  border-radius:2rem ;
  border: transparent;
  transform: translate(-50%,-50%);
}
h3{
  font-weight: 400;
}
</style>